<template>
  <div
    class="io-node__li"
    v-for="(item, key) in fe[is].ports"
    :key="key">
    <em
      class="port in"
      data-port-type="in"
      r="10"
      :data-fe-attr="key"
      :ref="setFeAttrEls"
      @mouseenter="handlePortMouseenter"
    />
    <label class="io-node__port-text">
      <span class="port-name">{{ key }}</span>
      <input v-model="feAttrValue[key]" />
    </label>
  </div>

</template>
<script lang="ts">
import { computed, defineComponent, h, PropType, ref, VNode } from 'vue'
import useIoNode from '../hooks/useIoNode'

import fe from '../fe-definition-config'

import type { RelativePathForNode } from '@/views/AppMain/components/SvgCanvas/type'
import { SVGFilterConfig } from '../type'
import { Dictionary } from '@/utils/type'

export default defineComponent({
  name: 'NormalNode',
  props: {
    is: {
      type: String as PropType<keyof typeof fe>,
      required: true
    },
    nodeId: {
      type: String,
      required: true
    },
    relativePaths: {
      type: Object as PropType<RelativePathForNode>,
      required: true
    }
  },
  setup(props) {
    const {
      fromPort,
      toPort,
      ioNodeEl,
      setFeAttrEls,
      allDescendants,
      handlePortMouseenter,
      filterThumbUrl
    } = useIoNode()

    const feAttrValue = ref<Dictionary<string | number>>({})

    const foreignPortValue = ref<Dictionary<string | number>>({})

    const mergedFeAttrValue = computed<Dictionary<string | number>>(() => ({
      ...feAttrValue.value,
      ...foreignPortValue.value,
      result: props.nodeId
    }))

    const afterConnected = () => {
      foreignPortValue.value[toPort?.value.attr as string] = fromPort?.value.vm.setupState.mergedFeAttrValue[fromPort?.value.attr]
    }

    const getVNodeFragment = (item: any, index: number): VNode => {
      const { is } = item.props
      const { mergedFeAttrValue } = item.setupState

      const nodeAttrs: Dictionary<string> = {}
      Object.keys(mergedFeAttrValue || {}).forEach(key => {
        if (mergedFeAttrValue[key] !== undefined) {
          nodeAttrs[key] = mergedFeAttrValue[key] || ''
        }
        if (nodeAttrs.in === nodeAttrs.result) {
          delete nodeAttrs.in
        }
      })
      return h(is, nodeAttrs)
    }

    // 填充默认值
    console.log(fe[props.is])
    if (['normal', undefined].includes(fe[props.is].type)) {
      const { ports } = fe[props.is] as SVGFilterConfig.NormalNode
      Object.keys(ports).forEach(key => {
        if (
          (['number', 'range'] as unknown[]).includes(ports[key].type)
        ) {
          feAttrValue.value[key] = ports[key].defaultValue ?? 0
        } else {
          feAttrValue.value[key] = ports[key].defaultValue ?? ''
        }
      })
    }
    return {
      fromPort,

      ioNodeEl,

      setFeAttrEls,
      feAttrValue,
      foreignPortValue,
      mergedFeAttrValue,
      afterConnected,

      handlePortMouseenter,
      fe,
      allDescendants,

      filterThumbUrl,
      getVNodeFragment
    }
  }
})
</script>

<style lang="scss" scoped>
  @import url('../styles/public.scss');
</style>
